import { useEffect, useState } from "react";
import { useOutlet } from "react-router-dom";
import { Skeleton } from "antd";
import { useUserStore, useMenuStore } from "@/stores";
import { useLocation } from "react-router-dom";
import { useCommonStore } from "@/hooks/useCommonStore";
import { KeepAlive } from "react-activation";
import styles from "./index.module.less";
import Header from "./components/Header";
import Tabs from "./components/Tabs";
import { Icon } from "@iconify/react";
import { menuData } from "./menu.js";
import Forbidden from "@/views/403";
import Menu from "./components/Menu.tsx";

const Layout = function () {
    const outlet = useOutlet();
    const [isLoading, setLoading] = useState(true);
    const { pathname, search } = useLocation();
    const { setPermissions } = useUserStore((state) => state);
    const { setMenuList } = useMenuStore((state) => state);
    const { isCollapsed, isRefresh, permissions, isMaximize } = useCommonStore();

    const uri = pathname + search;

    useEffect(() => {
        setLoading(true);
        setTimeout(() => {
            setMenuList(menuData || []);
            const menu = ["/system/user", "/system/goods", "/system/ship", "/system/order", "/system/cargo", "/system/log", "/system/truck"];
            setPermissions(menu);
            setLoading(false);
        }, 200);
    }, []);

    return (
        <div id="layout">
            <Menu />
            <div className={styles.layout_right}>
                <div
                    id="header"
                    className={`
                        border-bottom
                        transition-all
                        ${styles.header}
                        ${isCollapsed ? styles["header-close-menu"] : ""}
                        ${isMaximize ? styles["header-none"] : ""}
                    `}
                >
                    <Header />
                    <Tabs />
                </div>
                <div
                    id="layout-content"
                    className={`
                        overflow-auto
                        transition-all
                        ${styles.con}
                        ${isMaximize ? styles["con-maximize"] : ""}
                        ${isCollapsed ? styles["con-close-menu"] : ""}
                    `}
                >
                    {isLoading && permissions.length === 0 && <Skeleton active className="p-30px" paragraph={{ rows: 10 }} />}
                    {!isLoading && permissions.length === 0 && <Forbidden />}
                    {isRefresh && (
                        <div
                            className={`
                                absolute
                                left-50%
                                top-50%
                                -rotate-x-50%
                                -rotate-y-50%
                                `}
                        >
                            <Icon className="text-40px animate-spin" icon="ri:loader-2-fill" />
                        </div>
                    )}
                    {permissions.length > 0 && (
                        <KeepAlive id={uri} name={uri}>
                            {outlet}
                        </KeepAlive>
                    )}
                </div>
            </div>
        </div>
    );
};
export default Layout;
